<script setup lang="ts">
import {uuid} from "@/utils/random";
import {skyNoticeSuccess, skyNoticeError, skyMsgError, skyMsgWarning, skyMsgBox} from "@/utils/sky.js";
import {
  update,
  getById,
} from "@/apis/sky/tools/config";

const formRef = ref();
const pageData = ref({
  activeName: "basic",
  loading: false,
  form: {
    id: null,
    sys_icon: "",
    sys_title: "",
    sys_scheme: "",
    sys_host: "",
    copyright: "",
    company_name: "",
    company_email: "",
    company_phone: "",
    access_token_timeout: null,
    refresh_token_timeout: null,
    cache_timeout: null,
    demo: false,
    white_apis: {},
    sort: 1,
    status: true,
    belong_dept: null,
    remark: null,
  },
  rules: {},
  white_apis: [],
});
const method = reactive({
  /** 切换tabs */
  handleClick: (tab: any) => {
    pageData.value.activeName = tab.props.name;
  },
  /** 删除 */
  handleDelete: (row: any) => {
    const id = row.id;
    if (id === null || id === "") {
      skyMsgWarning("请选中需要删除的数据🌻");
      return;
    }
    skyMsgBox("您确认需要删除白名单地址[" + row.api + "]么？")
      .then(async () => {
        try {
          const index = pageData.value.white_apis.findIndex(item => item.id === id);
          pageData.value.white_apis.splice(index, 1);
          pageData.value.form.white_apis = pageData.value.white_apis.map(item => item.api);
          skyNoticeSuccess("删除成功");
        } catch (error) {
          skyNoticeError("删除失败，请刷新重试");
        }
      })
      .catch(() => {
        skyMsgError("已取消🌻");
      });
  },
  /** 回显数据 */
  handleEcho: async () => {
    try {
      pageData.value.loading = true;
      const res = await getById(1);
      pageData.value.form = res.data;
      pageData.value.white_apis = res.data.white_apis.map((item: any, index) => {
        return {
          id: uuid(),
          sort: index + 1,
          api: item,
        }
      });
      pageData.value.loading = false;
    } catch (error) {
      skyNoticeError("数据获取失败，请刷新重试🌻");
    }
  },
  /** 确定  */
  handleConfirm: () => {
    if (!formRef.value) return;
    (formRef.value).validate(async (valid: any) => {
      if (valid) {
        if (pageData.value.form.id) {
          try {
            await update(pageData.value.form.id, pageData.value.form);
            skyNoticeSuccess("修改成功🌻");
            await method.handleEcho();
          } catch (error) {
            skyNoticeError("修改失败，请刷新重试🌻");
          }
        }
      } else {
        skyMsgError("验证失败，请检查填写内容🌻");
      }
    });
  },
});
onMounted(() => {
  method.handleEcho();
});
</script>

<template>
  <div class="sky-flex">
    <SkyCard>
      <el-tabs ref="formRef" v-model="pageData.activeName" class="demo-tabs" @tab-click="method.handleClick">
        <el-tab-pane label="基本信息" name="basic">
          <el-form ref="formRef" :rules="pageData.rules" :model="pageData.form" label-width="125px" status-icon>
            <el-row>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="系统名称" prop="sys_title">
                  <el-input v-model="pageData.form.sys_title" placeholder="请输入系统名称" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="系统协议" prop="sys_scheme">
                  <el-input v-model="pageData.form.sys_scheme" placeholder="请输入系统协议" clearable/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="系统主机【地址】" prop="sys_host">
                  <el-input v-model="pageData.form.sys_host" placeholder="请输入系统主机【地址】" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="版权信息" prop="copyright">
                  <el-input v-model="pageData.form.copyright" placeholder="请输入版权信息" clearable/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="公司名称" prop="company_name">
                  <el-input v-model="pageData.form.company_name" placeholder="请输入公司名称" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="公司邮箱" prop="company_email">
                  <el-input v-model="pageData.form.company_email" placeholder="请输入公司邮箱" clearable/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="公司电话" prop="company_phone">
                  <el-input v-model="pageData.form.company_phone" placeholder="请输入公司电话" clearable/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="安全信息" name="safe">
          <el-form ref="formRef" :rules="pageData.rules" :model="pageData.form" label-width="125px" status-icon>
            <el-row>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="访问令牌超时时间" prop="access_token_timeout">
                  <el-input-number style="width: 95%" v-model="pageData.form.access_token_timeout" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="刷新令牌超时时间" prop="refresh_token_timeout">
                  <el-input-number style="width: 95%" v-model="pageData.form.refresh_token_timeout" clearable/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="数据缓存时间" prop="cache_timeout">
                  <el-input-number style="width: 95%" v-model="pageData.form.cache_timeout" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }">
                <el-form-item label="是否开启演示环境" prop="demo">
                  <el-switch
                    v-model="pageData.form.demo"
                    class="ml-2"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- 数据表格 -->
          <el-table
            v-loading="pageData.loading"
            height="400"
            border
            :data="pageData.white_apis"
            empty-text="暂时没有数据哟🌻"
          >
            <el-table-column label="序号" prop="sort" width="80" align="center"/>
            <el-table-column label="白名单地址" prop="api" align="center"/>
            <el-table-column label="操作" align="center" width="120" fixed="right">
              <template #default="{ row }">
                <el-tooltip content="删除🌻" placement="top">
                  <el-button
                    type="danger"
                    icon="Delete"
                    circle
                    plain
                    @click="method.handleDelete(row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 保存 -->
      <div class="mt2 flex justify-center">
        <el-button type="primary" plain @click="method.handleConfirm">保存</el-button>
      </div>
      <el-row :gutter="10">
        <el-col :span="1.5">
        </el-col>
      </el-row>
    </SkyCard>
  </div>
</template>

<style scoped lang="scss">
.sky-flex {
  .flex {
    display: flex;
  }

  .justify-center {
    justify-content: center;
  }
}
</style>
